import React, { FC, useMemo, useContext } from "react";
import { Tag } from 'antd';
import { AutoModelDataType } from "./index";
import { ChatLoadText, ChatLoadTitle, ChatLoadTable } from '../ChatLoadDom'
import useSequentialLoader, { LoaderContext } from '@/utils/hooks/useSequentialLoader'
interface IProps {
  data: AutoModelDataType['modelCalculateResult'];
  onLoad?: () => void;
  onRender?: (isForce: boolean) => void;
}

const Step3: FC<IProps> = ({
  data,
  onLoad,
  onRender
}) => {
  const { effectData } = useContext(LoaderContext)
  const info = useMemo(() => {
    const data = effectData.modelCalculateResult
    const expectStr = data.filter((item: any) => item.bottleneck).map((item: any) => item.operationParameter).join('、')
    return {
      modelCalculateResult: data,
      startStr: `接下来，我将调用时序大模型进行计算，获得操作参数的优化设定值。`,
      endStr: `经过优化设定值与工艺卡片的操作范围进行对比，我发现超出正常参数范围的瓶颈参数为: ${expectStr}`
    }
  }, [effectData])
  const columns = [
    {
      title: "序号",
      key: "index",
      render: (record: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "操作参数",
      dataIndex: "operationParameter",
      key: "operationParameter",
      render: (record: any) => {
        return record?.operationParameter ?? "--";
      },
    },
    {
      title: "仪表位号",
      dataIndex: "tagName",
      key: "tagName",
      render: (record: any) => {
        return record?.tagName ?? "--";
      },
    },
    {
      title: "单位",
      dataIndex: "unit",
      key: "unit",
      render: (record: any) => {
        return record?.unit ?? "--";
      },
    },
    {
      title: "正常操作范围",
      dataIndex: "normalOperationRange",
      key: "normalOperationRange",
      render: (record: any) => {
        return record?.normalOperationRange ?? "--";
      },
    },
    {
      title: "优化设定值",
      dataIndex: "optValue",
      key: "optValue",
      render: (record: any) => {
        return record?.optValue ?? "--";
      },
    },
    // {
    //   title: "指标上限",
    //   dataIndex: "upperIndex",
    //   key: "upperIndex",
    //   render: (text: any) => {
    //     return text ? text : "--";
    //   },
    // },
    // {
    //   title: "指标下限",
    //   dataIndex: "lowIndex",
    //   key: "lowIndex",
    //   render: (text: any) => {
    //     return text ? text : "--";
    //   },
    // },
    {
      title: "相关系数",
      dataIndex: "weight",
      key: "weight",
      render: (record: any) => {
        return record?.weight ?? "--";
      },
    },
    {
      title: "是否瓶颈",
      dataIndex: "bottleneck",
      key: "bottleneck",
      render: (record: any, index: any) => {
        return record?.bottleneck ? <Tag color="#E5AF2A">是</Tag> : <Tag>否</Tag>;
      },
    },
  ];
  const loadedComponents = useSequentialLoader([
    {
      component: ChatLoadTitle,
      effectKey: 'startStr'
    },
    {
      component: ChatLoadTable,
      effectKey: 'modelCalculateResult',
      componentProps: {
        columns: columns,
      }
    },
    {
      component: ChatLoadText,
      effectKey: 'endStr'
    },
  ], info, {
    onLoad: () => {
      onRender && onRender(true)
    },
    onEnd: () => {
      onLoad && onLoad()
    }
  }, {
    loading: !!onLoad
  })
  return (
    <>
      {loadedComponents}
    </>
  );
};

export default Step3;
